<template>
    <div id="curMenu" v-show="!BeginTeaching">
        <div class="btnWarp">
            <button @click.stop="chooseJIAOCAI" class="periods btn">{{configJIAOCAI.JIAOCAI}}</button>
            <button @click.stop="chooseZHANGJIE" class="periods btn">{{configJIAOCAI.ZHANGJIE}}</button>
            <button @click.stop="chooseKESHI" class="periods btn">{{configJIAOCAI.KESHI}}</button>
            <img src="../assets/images/CourseIcon.png" alt="">
        </div>
        <div>
            <!--<transition enter-active-class="animated zoomInDown" leave-active-class="animated zoomOutUp">
                <router-view :msg="giveData" v-show="showChange"></router-view>
            </transition>-->
            <transition name="el-zoom-in-top">
                <TextBookList v-show="showJIAOCAI.JIAOCAI"></TextBookList>
            </transition>
            <transition name="el-zoom-in-top">
                <ChapterList v-show="showJIAOCAI.ZHANGJIE"></ChapterList>
            </transition>
            <transition name="el-zoom-in-top">
                <PeriodsList v-show="showJIAOCAI.KESHI"></PeriodsList>
            </transition>
        </div>
    </div>
</template>
<script>

    import TextBookList from './TextBookList.vue'
    import ChapterList from './ChapterList.vue'
    import PeriodsList from './PeriodsList.vue'
    import publicFUN from '../public'

    import {mapGetters, mapActions} from 'vuex'

    import store from '../store/'

    document.onclick = function () {
        store.getters.showJIAOCAI.JIAOCAI = false;
        store.getters.showJIAOCAI.ZHANGJIE = false;
        store.getters.showJIAOCAI.KESHI = false;
    }
    export default {
        name: "",
        components: {
            'TextBookList': TextBookList,
            'ChapterList': ChapterList,
            'PeriodsList': PeriodsList
        },
        computed: mapGetters([
            'teachingmaterial',
            'configJIAOCAI',
            'showJIAOCAI',
            'BeginTeaching'
        ]),
        data () {
            return {}
        },
        methods: {
            ...mapActions([
                'chooseJIAOCAI',
//                'chooseZHANGJIE',
//                'chooseKESHI'
            ]),
            chooseZHANGJIE(){
                $('.layui-layer.layui-layer-tips.layer-anim').remove()
                for (let i in store.state.mutations.showJIAOCAI) {
                    store.state.mutations.showJIAOCAI[i] = false
                }
                if (store.state.mutations.confirmTextBookID != '') {
                    let jiaocaiID = store.state.mutations.confirmTextBookID

                    //根据教材ID获取更新章节列表
                    this.$http.get(('api/Chapter/find?id=' + jiaocaiID + '&sk=' + store.state.mutations.getToken)).then(function (res) {
                        store.state.mutations.infoZHANGJIE = publicFUN.BuildTree(res.data.data, 0)
                    })

                    store.state.mutations.showJIAOCAI.ZHANGJIE = true
                } else {
                    layer.msg('请先选择教材', {icon: 2});
                    return
                }
            },
            chooseKESHI(){
                $('.layui-layer.layui-layer-tips.layer-anim').remove()
                for (let i in store.state.mutations.showJIAOCAI) {
                    store.state.mutations.showJIAOCAI[i] = false
                }
                if (store.state.mutations.confirmZHANGJIEID != '') {
                    this.$http.get(('api/lession/period?id=' + store.state.mutations.confirmZHANGJIEID + '&sk=' + store.state.mutations.getToken)).then(function (res) {
                        store.state.mutations.infoKESHI = res.data.data
                    })
                } else {
                    layer.msg('请先选择章节', {icon: 2});
                    return
                }
                store.state.mutations.showJIAOCAI.KESHI = true
            }
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    @import '../assets/css/public.scss';

    #curMenu {
        z-index: 80;
        background: #fff;
        position: fixed;
        bottom: 0.5rem;
        top: auto;
        left: 0;
        right: 0;
        margin: auto;
        width: 50rem;
        height: 3rem;
        box-shadow: $boxShadow;
        border-radius: 6px;
        .btnWarp {
            width: 39rem;
            height: 3rem;
            border-radius: 6px 0 0 6px;
            .btn {
                float: left;
                width: 13rem;
                height: 3rem;
                line-height: 3rem;
                color: #606060;
                text-align: center;
                cursor: pointer;
                font-size: 1rem;
            }
            .btn:hover {
                color: $themeColor;
            }
            img {
                display: block;
                position: absolute;
                right: 2rem;
                top: -2rem;
                z-index: 2;
            }
        }
    }
</style>